<template>
	<view :animation="animationData" class="btn-top" @click="tapTop"><u-icon name="photo" color="#fff" size="28"></u-icon></view>
</template>

<script>
let animation = uni.createAnimation({
	timingFunction: 'ease'
});
export default {
	props: {
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			animationData: {}
		};
	},
	onLoad() {},
	created() {
		animation.opacity(0).step({ duration: 0 });

		this.animationData = animation.export();
	},
	watch: {
		scrollTop(newVal, oldVal) {
			if (newVal < 100) {
				animation.opacity(0).step({ duration: 500 });
				this.animationData = animation.export();
			} else {
				animation.opacity(1).step({ duration: 500 });
				this.animationData = animation.export();
			}
		}
	},
	computed: {},
	methods: {
		tapTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 500
			});
		}
	}
};
</script>

<style lang="scss">
.btn-top {
	position: fixed;
	bottom: 80rpx;
	right: 40rpx;
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 100%;
	overflow: hidden;
	text-align: center;
	background: #ce1617;
}
</style>
